<template>
  <div class="specCon">
    <div class="specLabel">{{ data.label }}</div>
    <div class="specItemCon">
      <spec-item
        v-for="(item, index) in data.items"
        :key="index"
        :is-checked="checkedItem == index"
        :data="item"
        :index="index"
        @item-click="itemClick"
      />
    </div>
  </div>
</template>

<script>
import SpecItem from "./specItem";
export default {
  components: {
    SpecItem,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      checkedItem: 0,
    };
  },
  methods: {
    itemClick(e) {
      console.log(e);
      this.checkedItem = e.index;
      this.$emit("spec-change", {
        spec: this.data,
        item: e,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.specCon {
  .specLabel {
    font-size: 0.12rem;
  }
  .specItemCon {
    display: flex;
  }
}
</style>